<template>
  <div>
    <!-- 插值语法简洁化：将过长的数据引用，写在计算属性中。 -->
    <h1>当前求和为：{{sum}}</h1>
    <h3>当前求和放大十倍为：{{bigSum}}</h3>
    <h3>我在{{school}}，学习{{subject}}</h3>
    <!-- v-model.number：将表单收集到的数据强制转换为number类型，然后再赋值。 -->
    <select v-model.number="number">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <!-- 
        这里鼠标点击事件传递number的目的：
        为了告诉mapMutations自动生成后的方法调用后传到mutations的value为number，不声明的情况默认传递的就是一个event（事件对象） 
    -->
    <button @click="increment(number)">+</button>
    <button @click="decrement(number)">-</button>
    <button @click="incrementOdd(number)">当前求和为奇数再加</button>
    <button @click="incrementWait(number)">等一等再加</button>

    <!-- Count组件中使用了'Person组件'的'人员列表'数据，实现组件间数据共享 -->
    <h3 style="color:red">Person组件的总人数是：{{personList.length}}</h3>
  </div>
</template>

<script>
    // 引入mapState、mapGetters、mapMutations、mapActions
    import {mapState, mapGetters ,mapMutations ,mapActions} from 'vuex'

    export default {
        name:"Count",
        data() {
            return {
                number:1, // 用户选择的数字
            }
        },
        computed:{
            // 借助mapState生成计算属性，从state中读取数据。（对象写法：引入mapState后在方法内传入对象）
            // key：当前组件中插值语法写的属性名称；value：state中的数据名
            ...mapState({sum:'sum' ,school:'school' ,subject:'subject' ,personList:'personList'}), 

            ...mapGetters(['bigSum']), // 数组写法
        },
        methods:{
            // 通过引入mapMutations来自动生成联系mutations中对应的方法（对象写法）
            ...mapMutations({increment:'INCREMENT' ,decrement:'DECREMENT'}),
            
            // 通过引入mapActions来自动生成联系actions对应的方法（数组写法）
            ...mapActions(['incrementOdd' ,'incrementWait']), // 使用前提：生成的方法名必须与mutations中的方法、鼠标点击事件方法名称一致
        },
        mounted() {
        }
    }
</script>

<style>
    button {
        margin-left: 5px;
    }
</style>